<!-- 右侧浮动按钮组 -->
<template>
<div class="frBtns" v-show="goTopShow">
    <ul class="list">
        <li v-for="(item,index) in listFilter" :key="index" class="list_i">
            <!-- 带链接 -->
            <a :href="item.link" v-if="item.isLink" class="list_i_link">
                {{item.title}}
            </a>
            <span v-else-if="item.isCode" class="list_i_code">
                {{item.title}}
                <div class="codeBox">
                    <!-- <div id="qrCode"></div> -->
                    <img src="@/assets/img/help.png" alt="" class="img">
                </div>
            </span>
            <!-- 返回顶部 -->
            <span v-else class="list_i_2top" @click="goTop">
                <p><i class="icon"></i></p>
                <p class="txt">{{item.title}}</p>
            </span>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    computed: {
        listFilter() {
            return this.list.filter(item => {
                return item.isShow
            })
        }
    },
    data() {
        return {
            list: [
                // {
                //     title: this.$t("right-service"),
                //     link: '/',
                //     isCode: true,
                //     isShow: true
                // },
                {
                    title: this.$t("right-top"),
                    link: '/',
                    isShow: true
                },
            ],
            scrollTop: 0,
            goTopShow: false,
            qrCodeObj: {},
            link: ''
        }
    },
    watch: {
        scrollTop(val) {
            if (this.scrollTop > 300) {
                this.goTopShow = true;
            } else {
                this.goTopShow = false;
            }
        }
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
        // this.getConfigFun()
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        // 获取客服信息
        // getConfigFun() {
        //     this.invoke(getConfig, 'address_service').then(res => {
        //         if (res && res.code == 200) {
        //             if (res.data) {
        //                 let data = JSON.parse(res.data)
        //                 this.link = data.service
        //                 console.log(this.link, 'link')
        //                 if (!this.link) {
        //                     this.list.shift();
        //                 }
        //                 this.createQrCode()
        //             }
        //         }
        //     })
        // },
        // 生成二维码
        // createQrCode() {
        //     document.getElementById('qrCode').innerHTML = '';
        //     this.qrCodeObj = new QRCode("qrCode", {
        //         text: this.link,
        //         width: 200,
        //         height: 200,
        //         colorDark: "#333",
        //         colorLight: "#fff",
        //         correctLevel: QRCode.CorrectLevel.H
        //     });
        // },
        handleScroll() {
            this.scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            if (this.scrollTop > 500) {
                this.goTopShow = true;
            }
        },
        goTop() {
            let timer = null,
                _that = this;
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(function fn() {
                if (_that.scrollTop > 0) {
                    _that.scrollTop -= 1000;
                    document.body.scrollTop = document.documentElement.scrollTop =
                        _that.scrollTop;
                    timer = requestAnimationFrame(fn);
                } else {
                    cancelAnimationFrame(timer);
                    _that.goTopShow = false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
p {
    margin: 0;
}

.frBtns {
    $ca: #e45291;
    $c: #E1E1E1;
    position: fixed;
    bottom: 10%;
    right: 20px;
    width: 60px;
    background-color: #fff;
    border: 1px solid $c;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .16);
    z-index: 9999;
    border-radius: 2px;

    .list {

        // 列表项
        &_i {
            margin: 0 5px;
            display: flex;
            justify-content: center;

            &:not(:last-child) {
                border-bottom: 1px solid $c;
            }

            &_link,
            &_code,
            &_2top {
                font-size: 14px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }

            &_link,
            &_code {
                width: 30px;

                &:hover {
                    color: $ca;
                }
            }

            // 链接
            &_link {}

            // 二维码
            &_code {
                position: relative;

                &:hover {
                    .codeBox {
                        display: block
                    }
                }

                .codeBox {
                    background-color: #fff;
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .16);
                    display: none;
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    right: 50px;
                    top: 0;
                    padding: 10px;

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            // 返回顶部
            &_2top {
                color: $ca;
                display: flex;
                flex-direction: column;

                .icon {
                    background: url('@/assets/img/icon_down_pink.svg') no-repeat center center / 100% 100%;
                    width: 20px;
                    height: 20px;
                    display: block;
                    transform: rotate(180deg);
                }
            }
        }
    }
    @media (min-width:768px) and (max-width:1280px) {
        width: 50px;

        .list {
            &_i {

                &_link,
                &_code,
                &_2top {
                    height: 50px;
                    font-size:12px;
                }
                &_code{
                    padding-left: 5px;
                }
            }
        }
    }
    @media (max-width:767px) {
        top: auto;
        bottom: 5%;
    }
}
</style>
